<template>
    <div style="margin-bottom: 60px;">
        <!--轮播-->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" width="100%" height="240" />
            </van-swipe-item>
        </van-swipe>
        <!--图标-->
        <van-grid :column-num="5" icon-size="35px" :border="false">
            <van-grid-item v-for="value in icondata" :key="value" :icon="value.icon" :text="value.text" />
        </van-grid>
        <!-- 视频列表-->
        <van-cell-group inset v-for="item in videoData"  @click="videobtn(item.id)">
            <van-cell :title="item.videoName" />
            <div style="position: relative; width: 100%;">
                <van-image width="100%" height="100%"
                    :src="item.coverUrl" />

                <van-icon name="play-circle" size="40px" class="icons" />
            </div>
            <van-row style="font-size: 12px; color: #7c7a78;">
                <van-col span="4">{{ item.authorId }}</van-col>
                <van-col span="4">{{ item.viewCount}}万次播放</van-col>
                <van-col span="8">{{item.createdTime}}</van-col>
            </van-row>
        </van-cell-group>

    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { VideosApi } from '../../api'
const images = ref([
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
])

const icondata = ref([
    { text: '车型大全', icon: 'http://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/car-91669090d3a0ab0d9a2a..png' },
    { text: '排行榜', icon: 'http://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/rank-fffb4b136cdb7c8a4423..png' },
    { text: '车友圈', icon: 'http://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/community-e7b0155680ebf038a88c..png' },
    { text: '二手车', icon: 'http://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/search-3191b0fb041f0728a3f6..png' },
    { text: '条件找车', icon: 'http://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/search-3191b0fb041f0728a3f6..png' }
])
const videoData =ref()
import { useRouter } from 'vue-router'
const router = useRouter()
const videobtn = (id) => { 
router.push({ path: '/moveVideo', query: { id:id } })
}


onMounted(() => { 
    CallVideosApi()
})

const CallVideosApi = () => { 
    VideosApi.select.call().then(res => { 
        console.log(res);
        images.value = res.map(item => item.coverUrl)
        videoData.value = res
    })
}

</script>

<style scoped>
.icons{
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    background-color: rgba(15, 15, 15, 0.5);
    color: white;
}
:deep(.van-cell__title){
    font-size: 16px;
    font-weight: 800;
}
</style>